<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-02-06 11:23:56
 * @LastEditTime: 2025-02-20 09:52:48
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \uniapp\src\pages\model\model.vue
-->
<template>
    <view class="bg-page min-h-screen">
        <view class="px-[32rpx] bg-white shadow">
            <view class="py-[32rpx]">
                <u-search @clear="onClear" @search="onSearch" placeholder="搜索品牌" v-model="keyword" :clearabled="true"
                    :show-action="true" action-text="搜索" :animation="true" shape="round"></u-search>
            </view>
            <view class="">
                <u-tabs class="base-tabs" :list="state.tabList" :is-scroll="false" v-model="currentTabIndex"
                    @change="handleChange" activeColor="var(--color-primary)" inactive-color="#606266"
                    font-size="32"></u-tabs>
            </view>
        </view>
        <view class="flex items-center justify-between content-wrap relative mt-[10px]">

            <view class="content-right p-[20rpx] bg-white">
                <scroll-view scroll-y>
                    <view class="flex flex-wrap items-center justify-between">
                        <view class="w-1/3" v-for="(left, index) in leftList" :key="index">
                            <view @click="toCheckModel(left)" class="cate-title ">
                                <view class="pl-[10rpx]">
                                    <view class="mr-[10rpx] mb-[10rpx]">
                                        <view class="text-center">
                                            <image :src="left.img" class="w-[200rpx] h-[200rpx] rounded-[8rpx]">
                                            </image>
                                        </view>
                                        <view class="text-[28rpx] w-[150rpx] text-center">
                                            {{ left.name }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { modelList } from '@/api/repair'
import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
import { computed, reactive, ref } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
const appStore = useAppStore()

const keyword = ref('')

const currentTabIndex = ref<number>(0)

const leftList = computed(() => state.categoryList[state.tabList[currentTabIndex.value]?.type])

const currentTopTabId = ref()

const currentLeftMenuId = ref()

const state = reactive({
    activeMenu: '0',
    categoryList: [],
    tabList: [],
    from: ''
})
const toggleLeft = (item: any) => {
    currentLeftMenuId.value = item.id
}
const handleChange = (index: number) => {
    if (index == currentTabIndex.value) return
    currentTabIndex.value = Number(index)
    let curTopTabItem = state.tabList[index]

    currentTopTabId.value = curTopTabItem?.extra
    // currentLeftMenuId.value = curLeft.id
}

const init = async () => {
    const res = await modelList({})
    state.categoryList = res.categoryList
    state.tabList = res.tabList
    //currentLeftMenuId.value = curLeft.id
}

const onSearch = async () => { }
const onClear = () => {
    keyword.value = ''
}
const toCheckModel = (item: any) => {
    appStore.setModel(item)
    if (state.from == 'apply') {
        uni.redirectTo({
            url: '/pagesbaoxian/apply'
        })
    } else if (state.from == 'exchange') {
        uni.redirectTo({
            url: '/pagesbaoxian/exchange'
        })
    }

}

onLoad((options) => {
    state.from = options.from
})

onShow(() => {
    init()
})
</script>

<style lang="scss" scoped>
.shadow {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

.relative {
    position: relative;
}

.menu-left-border {
    border-left-width: 3px;
    border-left-style: solid;
}

.border-transparent {
    border-color: transparent !important;
}

.border-active {
    border-left-color: var(--color-primary);
}

.tabs-wrap {
    width: 450rpx;
}

.content-left,
.content-right {
    top: 0;
    bottom: 0;
    overflow: auto;
}

.content-left {
    position: absolute;
    width: 20%;
    left: 0;
    background-color: #f7f9fa;
}

.content-right {
    width: 100%;
    left: 0;
    position: absolute;

    .inner {
        width: 94%;
        padding: 20rpx 3%;
    }
}

.content-wrap {
    height: 85vh;
}
</style>
